<template>
  <div class="playImte-conatiner">
    <div class="playImte-header">
      <span class="title">缴费项目</span>
    </div>
    <div class="playImte-table scrollbar">
      <table v-if="pendingList.length > 0">
        <tr>
          <td style="width:20%;">
            <div class="table-title">订单编号</div>
          </td>
          <td style="width:20%;">
            <div class="table-title">缴费项目</div>
          </td>
          <td style="width:15%;">
            <div class="table-title">缴费人</div>
          </td>
          <td style="width:25%;">
            <div class="table-title">金额</div>
          </td>
          <td style="width:20%;">
            <div class="table-title">个人支付</div>
          </td>
        </tr>
        <tr v-for="(item, index) in pendingList" :key="index">
          <td>
            <div class="table-info">{{ item.zfid }}</div>
          </td>
          <td>
            <div class="table-info">{{ item.zfxxms }}</div>
          </td>
          <td>
            <div class="table-info">{{ item.xm }}</div>
          </td>
          <td>
            <div class="table-info">
              <p style="padding:4px 0;">支付金额：¥{{ item.zfje }} 元</p>
              <p style="padding:4px 0;">统筹支付：¥{{ item.ybtczf }} 元</p>
              <p style="padding:4px 0;">个人支付：¥{{ item.ybgrzf }} 元</p>
            </div>
          </td>
          <td @click="checkedMethod(index)">
            <div class="table-checked">
              <span class="el-icon-check" v-show="item.checked"></span>
            </div>
          </td>
        </tr>
      </table>
      <empty v-if="pendingList.length == 0" />
    </div>
    <div class="playImte-button-group" v-if="pendingList.length > 0">
      <div class="playImte-button" @click="playMetod"><span class="playImte-button-text">支付金额：¥{{ playTotal.zfje }}元,统筹支付：¥{{ playTotal.ybtczf }}元,个人支付{{ playTotal.ybgrzf }}元</span> 立即缴费</div>
    </div>
    <v-back></v-back>
    <div class="play-model-ask" v-if="modelShow">
      <div class="play-model" v-loading="loading">
        <div class="play-title">请在设备内扫e码通支付</div>
        <div v-if="playStatusText">
          <div class="play-loading2 el-icon-circle-close"></div>
          <div class="play-result1">支付失败</div>
          <div class="play-alert">{{ playStatusText }}</div>
          <div class="play-button1" @click="goHome">返回首页</div>
        </div>
        <div v-else>
          <div class="play-loading el-icon-loading" v-if="!isPalySuccess"></div>
          <div class="play-loading1 el-icon-circle-check" v-if="isPalySuccess"></div>
          <div class="play-result" v-if="!isPalySuccess">请扫码...</div>
          <div class="play-result" v-if="isPalySuccess">支付成功</div>
          <div class="play-button" @click="catePlayMetod" v-if="!isPalySuccess">取消支付</div>
          <div class="play-button1" @click="spingMethod" v-if="isPalySuccess">打印凭证</div>
          <div class="play-button1" @click="goHome" v-if="isPalySuccess">返回首页</div>
          <div class="play-alert" @click="goHome" v-if="isPalySuccess">{{ countdown }}秒后自动跳转</div>
        </div>

      </div>
    </div>
    <plugin-hiprint :spring-info="springInfo" />
    <div class="back-home-times">{{ backTime }}S</div>
  </div>
</template>

<script>
import vBack from '@/components/mainHeader/Back.vue';
import pluginHiprint from '@/components/pluginHiprint/PluginHiprint.vue';
import printJS from 'print-js';
import moment from 'moment';
export default {
  components: { vBack, pluginHiprint },
  data() {
    return {
      pendingList: [],
      playTotal: {
        zfje: 0,
        ybtczf: 0,
        ybgrzf: 0
      },
      isPalySuccess: false,
      modelShow: false,
      loading: false,
      countdown: 20,
      playStatusText: null,
      springInfo: {},
      userInfo: {},
      grid: '',
      ceSpringBtn: this.$API.IS_DEVEMENT,
      backTime: 60,
      isPlayDisabled:false
    };
  },
  created() {
    this.grid = this.$route.query.grid;
    console.log('this.gridthis.gridthis.grid', this.grid);
    this.initMethod();
    this.getUserInfo();
    this.goBackHome();
  },
  methods: {
    initMethod() {
      this.$http
        .get(this.$API.GET_PENDING_ORDER, { grid: this.grid })
        .then((res) => {
          console.log('支付列表', res);
          if (res.code == 200) {
            let list = Array.isArray(res.data) ? res.data : [];
            list.forEach(item => {
              item.ksmc = item.zfxxms;
            });
            this.pendingList = list;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    getUserInfo() {
      this.$http
        .get(this.$API.GET_USERINFO, { grid: this.grid })
        .then((res) => {
          if (res.code == 200) {
            this.userInfo = res.data || {};
          }
        });
    },
    checkedMethod(index) {
      let checked = this.pendingList[index].checked;
      this.pendingList[index].checked = checked == true ? false : true;
      let zfids=[];
      // let total = 0;
      // this.pendingList.forEach((item) => {
      //   if (item.checked) {
      //     total += Number(item.zfid);
      //   }
      // });
      // this.playTotal = total;
      this.pendingList.forEach((item) => {
        if (item.checked) {
          zfids.push(item.zfid);
        }
      });
      if(zfids.length>0){
        this.playCout(zfids)
      }else{
        this.playTotal = {
          zfje: 0,
          ybtczf: 0,
          ybgrzf: 0
        };
      }
      
    },
    playCout(zfids) {
      this.$http
        .post(this.$API.GET_COUNT + '?grid=' + this.grid, {
          zfids,
        })
        .then((res) => {
          console.log('计算', res);
          if (res.code == 200 && res.data) {
            this.playTotal = {
              zfje: res.data.zfje,
              ybtczf: res.data.ybtczf,
              ybgrzf: res.data.ybgrzf
            };
          }
        });
    },
    catePlayMetod() {
      this.loading = true;
      clearInterval(this.timers);
      clearInterval(this.downtimers);
      this.$http
        .post(this.$API.GET_CANCEL_PAY, { grid: this.grid })
        .then((res) => {
          console.log('结束支付', res);
          this.loading = false;
          if (res.code == 200) {
            this.isPalySuccess = false;
            this.modelShow = false;
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.loading = false;
        });
    },
    playMetod() {
      let zfids = [],
        activeList = [];
      this.pendingList.forEach((item) => {
        if (item.checked) {
          zfids.push(item.zfid);
          activeList.push(item);
        }
      });
      if (zfids.length == 0) return this.$message.error('请选择一个缴费项目');
      this.checkAllzfids = zfids;
      this.allActiveList = activeList;
      this.modelShow = true;
      this.isPalySuccess = false;
      this.playStatusText = null;
      clearInterval(this.timers);
      clearInterval(this.timerHome);
      this.playTimeMetod();
      this.timers = setInterval(() => this.playTimeMetod(), 15000);

    },
    playTimeMetod() {
      this.$http
        .post(this.$API.GET_PAY + '?grid=' + this.grid, {
          zfids: this.checkAllzfids,
        })
        .then((res) => {
          console.log('支付', res);
          if (res.code == 200 && res.data) {
            let playStatus = this.playMsg(res.data.status_code);
            if (playStatus.code == 1) {
              clearInterval(this.timers);
              this.isPalySuccess = true;
              this.springInfo = {
                pendingList: this.allActiveList,
                name: this.userInfo.xm,
                jsdh: this.allActiveList[0].jsdh,
                zfddh: this.allActiveList[0].zfddh,
                sex: this.userInfo.xb,
                csrq: this.userInfo.csrq,
                total: this.playTotal.zfje,
                ybtczf:this.playTotal.ybtczf,
                ybgrzf:this.playTotal.ybgrzf,
                grid: this.grid,
                jfsj: moment().format('YYYY-MM-DD HH:mm:ss'),
              };
              this.countdown = 20;
              this.countdownMethod();
            } else if (playStatus.code == -1) {
              clearInterval(this.timers);
              this.playStatusText = playStatus.msg;
            }
          }
        });
    },
    countdownMethod() {
      clearInterval(this.downtimers);
      this.downtimers = setInterval(() => {
        if (this.countdown == 0) {
          clearInterval(this.downtimers);
          this.goHome();
          return;
        }
        this.countdown--;
      }, 1000);
    },
    spingMethod() {
      printJS({
        printable: 'print-area',
        type: 'html',
        maxWidth: '100%',
        style: '@page { size: auto;  margin: 0mm;font-family: "Microsoft YaHei"}',
        scanStyles: false,
        documentTitle: '账单打印',
        targetStyles: ['*'],
      });
    },
    goHome() {
      this.$router.push({ path: '/' });
    },
    playMsg(hexNumber) {
      let msg = '',
        code = -1;
      if (hexNumber == -1) {
        msg = '写交易控制信息失败';
        code = 0;
      } else {
        let decimalNumber = hexNumber.toString(16);
        if (decimalNumber == 0x41) {
          msg = '写交易控制信息失败';
        } else if (decimalNumber == 0x35) {
          msg = '卡错误,请退出换卡重试';
        } else if (decimalNumber == 0x34) {
          msg = '卡错误,请退出换卡重试';
        } else if (decimalNumber == 0x33) {
          msg = '卡余额不足,请退出换卡重试';
        } else if (decimalNumber == 0x32) {
          msg = '卡限额,请退出换卡重试';
        } else if (decimalNumber == 0x31) {
          msg = '读卡失败';
        } else if (decimalNumber == 0x21) {
          msg = '硬件问题';
        } else if (decimalNumber == 0x20) {
          msg = 'POS 未开通';
        } else if (decimalNumber == 0x10) {
          msg = '系统平台错误';
        } else if (decimalNumber == 0x08) {
          msg = '系统平台错误';
        } else if (decimalNumber == 0x07) {
          msg = '未决超时';
        } else if (decimalNumber == 0x06) {
          msg = '交易未决';
          code = 0;
        } else if (decimalNumber == 0x05) {
          msg = '交易失败,请退出重试';
        } else if (decimalNumber == 0x04) {
          msg = '请放置卡片,请退出重试';
        } else if (decimalNumber == 0x03) {
          msg = '不支持该命令,请退出重试';
        } else if (decimalNumber == 0x02) {
          msg = '帧序号错误,请退出重试';
        } else if (decimalNumber == 0x01) {
          msg = '帧序号错误,请退出重试';
        } else if (decimalNumber == 0x00) {
          msg = '成功';
          code = 1;
        }
      }
      return { msg, code };
    },
    csSpring() {
      let pendingList = [
        {
          grid: '10794210',
          xm: '测试1',
          fyjg: '',
          zfddh: 'Z2024091200001',
          zfddid: '821088223',
          jsdh: '2024091200001',
          zfje: '0.02',
          jssj: '2024-09-12 11:13:38',
          zfxxms: '项目1',
        },
        {
          grid: '10794210',
          xm: '测试1',
          fyjg: '',
          zfddh: 'Z2024091200001',
          zfddid: '821088223',
          jsdh: '2024091200001',
          zfje: '0.02',
          jssj: '2024-09-12 11:13:38',
          zfxxms: '项目2',
        },
      ];
      this.userInfo = {
        xm: '测试1',
        xb: '男',
        csrq: '2004-01-01',
      };
      this.springInfo = {
        pendingList: pendingList,
        name: this.userInfo.xm,
        jsdh: pendingList[0].jsdh,
        zfddh: pendingList[0].zfddh,
        sex: this.userInfo.xb,
        csrq: this.userInfo.csrq,
        total: '0.02',
        grid: '10794210',
        jfsj: moment().format('YYYY-MM-DD HH:mm:ss'),
      };
      setTimeout(() => this.spingMethod(), 1500);
    },
    goBackHome() {
      this.backTime = 60;
      clearInterval(this.timerHome);
      this.timerHome = setInterval(() => {
        if (this.backTime == 1) {
          clearInterval(this.timerHome);
          this.$router.replace('/');
        }
        this.backTime--;
      }, 1000);
    }
  },
  destroyed() {
    clearInterval(this.timerHome);
    clearInterval(this.timers);
  },
};
</script>

<style lang="less">
.playImte-conatiner {
  width: 100%;
  height: 100%;
  position: relative;
  background: #efeff4;

  .playImte-header {
    height: 20%;
    background: linear-gradient(to bottom, #4a8ad0, #75a3d1);
    display: flex;
    align-items: center;
    justify-content: center;

    .title {
      font-size: 80 * @hv;
      color: #fff;
    }
  }

  .playImte-table {
    display: flex;
    justify-content: center;
    padding-top: 30 * @hv;
    align-items: flex-start;
    height: 62vh;

    table {
      border-collapse: collapse;
      width: 90%;
    }

    table,
    th,
    td {
      border: 1px solid #888;
    }

    .table-title {
      padding: 20 * @hv 15 * @wv;
      font-size: 28 * @hv;
      color: #333;
      text-align: center;
      font-weight: bold;
    }

    .table-info {
      padding: 20 * @hv 15 * @wv;
      font-size: 22 * @hv;
      color: #555;
    }
  }

  .playImte-button-group {
    display: flex;
    justify-content: center;
    padding-top: 30 * @hv;

    .playImte-button {
      width: 60%;
      height: 120 * @hv;
      font-size: 38 * @hv;
      background: #4a8ad0;
      color: #fff;
      text-align: center;
      line-height: 120 * @hv;
      border-radius: 120 * @hv;
      .playImte-button-text{
        font-size: 14px;
        padding-right:10px;
      }
    }
  }

  .play-model-ask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);

    .play-model {
      width: 70%;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #eee;
      padding: 20 * @hv;
      box-shadow: inset -1px 0px 0px 0px #edeef2;
    }

    .play-title {
      font-size: 70 * @hv;
      color: #333;
      font-weight: bold;
      text-align: center;
    }

    .play-loading {
      font-size: 180 * @hv;
      color: #409eff;
      font-weight: bold;
      padding: 80 * @hv 0;
      display: flex;
      justify-content: center;
    }

    .play-result {
      font-size: 80 * @hv;
      color: #333;
      font-weight: bold;
      text-align: center;
    }

    .play-result1 {
      font-size: 80 * @hv;
      color: #f56c6c;
      font-weight: bold;
      text-align: center;
    }

    .play-alert {
      padding: 40 * @hv 0;
      font-size: 60 * @hv;
      color: #f56c6c;
      font-weight: bold;
      text-align: center;
    }

    .play-loading1 {
      font-size: 240 * @hv;
      color: #67c23a;
      font-weight: bold;
      padding: 80 * @hv 0;
      display: flex;
      justify-content: center;
    }

    .play-loading2 {
      font-size: 240 * @hv;
      color: #f56c6c;
      font-weight: bold;
      padding: 80 * @hv 0;
      display: flex;
      justify-content: center;
    }

    .play-button {
      height: 120 * @hv;
      font-size: 42 * @hv;
      background: #f56c6c;
      color: #fff;
      text-align: center;
      line-height: 120 * @hv;
      border-radius: 120 * @hv;
      margin: 40 * @hv 20% 0 20%;
    }

    .play-button1 {
      height: 120 * @hv;
      font-size: 42 * @hv;
      background: #409eff;
      color: #fff;
      text-align: center;
      line-height: 120 * @hv;
      border-radius: 120 * @hv;
      margin: 40 * @hv 20% 0 20%;
    }
  }

  .table-checked {
    width: 60 * @wv;
    height: 60 * @wv;
    border-radius: 4px;
    border: 1px solid #888;
    margin: 0 auto;
    font-size: 50 * @wv;
    font-weight: bold;
    color: #67c23a;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>